<template>
    <label class="el-radio-button"
        :class="[
            { 'is-active': value === label },
            { 'is-disabled': disabled },
            { 'is-focus': focus }
        ]"
    >
        <input
            class="el-radio-button__orig-radio"
            :value="label"
            type="radio"
            v-model="value"
            @change="handleChange"
            :disabled="disabled"
            >
        <span
            class="el-radio-button__inner"
            @keydown.stop>
            <slot></slot>
            <template v-if="!$slots.default">{{label}}</template>
        </span>
    </label>
</template>


<script>
import Emitter from '../../mixins/emitter'
export default {
    name: 'ElRadioButton',
    mixins: [Emitter],
    props: {
      label: {},
      disabled: Boolean,
    },
    computed: {
        value: {
            get() {
                return this._radioGroup.value;
            },
            set(value) {
                this._radioGroup.$emit('input', value);
            }
        },
        _radioGroup() {
            let parent = this.$parent;
            while (parent) {
                if (parent.$options.componentName !== 'ElRadioGroup') {
                    parent = parent.$parent;
                } else {
                    return parent;
                }
            }
            return false;
        },
    },

    methods: {
      handleChange() {
        this.$nextTick(() => {
          this.$emit('change', this.model);
        });
      },
    }
}
</script>